<template>
  <div class="layout">
    <u-navbar
      is-back
      title="积分"
      :background="background"
      title-color="#fff"
      back-icon-color="#fff"
    >
    </u-navbar>
    <div class="bg">
      <div class="user u-p-40 u-flex u-row-between">
        <u-avatar src="/static/Oval@2x.png" mode="square"></u-avatar>
        <div class="u-flex u-flex-col">
          <div class="c_t">已连续签到1天</div>
          <div class="c_b">明日签到可获得10金币</div>
        </div>
        <div class="jf u-flex u-row-around">
          <u-image
            class="jf_icon"
            src="/static/Group 10@2x(6).png"
            width="44rpx"
            height="44rpx"
            mode="aspectFit"
          ></u-image>
          <text class="jf_count">2987</text>
          <u-icon name="arrow-right" color="#fff"></u-icon>
        </div>
      </div>
    </div>
    <!-- 日历 -->
    <div class="cal_wrap">
      <uni-calendar
        class="u-m-20 jf_calendar"
        :insert="true"
        :show-month="false"
        :selected="selected"
        @change="change"
      />
    </div>
    <!-- 赚取积分 -->
    <div class="get_jf bg_white u-m-20 u-p-20">
      <div class="get_tit u-m-b-20">如何赚取积分？</div>
      <block v-for="n in 6" :key="n">
        <div class="u-flex u-row-between u-m-b-10">
          <u-image
            class="jf_icon"
            src="/static/Group 10@2x(6).png"
            width="44rpx"
            height="44rpx"
            mode="aspectFit"
          ></u-image>
          <div class="fix_ht u-flex-col u-row-between">
            <div class="u-flex">
              <text class="get_h1">首次登录</text>
              <u-image
                class="get_icon"
                src="/static/Group 10@2x(6).png"
                width="28rpx"
                height="28rpx"
                mode="aspectFit"
              ></u-image>
              <text class="get_count">+10</text>
            </div>
            <div class="get_dsc">每位用户首次登陆时获取10积分</div>
          </div>
          <u-button type="error" size="mini" class="u-m-0">去完成</u-button>
        </div>
      </block>
    </div>
    <!-- 积分规则 -->
    <div class="u-m-20">
      <div class="rule_tit u-m-b-20">积分规则</div>
      <div class="rule_dsc">1.部分商家的商品可全额使用积分兑换</div>
      <div class="rule_dsc">
        2.可以在购买商家商品时，抵扣部分费用（100积分可抵扣1元）
      </div>
    </div>
  </div>
</template>
<script>
/**
 * 获取任意时间
 */
function getDate(date, AddDayCount = 0) {
  if (!date) {
    date = new Date();
  }
  if (typeof date !== "object") {
    date = date.replace(/-/g, "/");
  }
  const dd = new Date(date);

  dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期

  const y = dd.getFullYear();
  const m =
    dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
  const d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
  return {
    fullDate: y + "-" + m + "-" + d,
    year: y,
    month: m,
    date: d,
    day: dd.getDay(),
  };
}
export default {
  data() {
    return {
      background: {
        backgroundColor: "#434A62",
      },
      show: true,
      mode: "date",
      selected: [
        {
          date: getDate(new Date(), -3).fullDate,
          info: "已签到",
        },
        {
          date: getDate(new Date(), -2).fullDate,
          info: "已签到",
          data: {
            custom: "自定义信息",
            name: "自定义消息头",
          },
        },
        {
          date: getDate(new Date(), -1).fullDate,
          info: "已签到",
        },
      ],
    };
  },
  methods: {
    change() {},
  },
};
</script>
<style lang="scss" scoped>
@import url("./integral.scss");
</style>
